<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>宿舍管理系统</title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token()}}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>

    <link rel="stylesheet" href="{{asset('css/font.css')}}">
    <link rel="stylesheet" href="{{asset('css/xadmin.css')}}">
    <script type="text/javascript" src="{{asset('lib/layui/layui.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{asset('js/xadmin.js')}}"></script>
    <style>
        .odd{
            color:red;
        }
        .even{
            color:green;
        }
    </style>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <form class="layui-form">
            {{csrf_field()}}
            <input type="hidden" name="staff_id" value="{{$staff->id}}">
            <input type="hidden" name="dorm_id_from" value="{{$staff->dorm_id}}">
            @if ($staff->dorm_id)
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        原宿舍号
                    </label>
                    <div class="layui-input-inline">
                        <input type="text"  required="" name="dorm_code_from"  value="{{$staff->dorm->code}}" disabled=""
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="dorm_id_to" class="layui-form-label">
                        入住宿舍
                    </label>
                    <div class="layui-input-block">
                        <input type="text"  required="" name="dorm_code_to"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>将人员移出宿舍，将入住宿舍放空即可。
                    </div>
                </div>
            @else
                <div class="layui-form-item">
                    <label for="dorm_id_to" class="layui-form-label">
                        <span class="x-red">*</span>入住宿舍
                    </label>
                    <div class="layui-input-block">
                        <input type="text"  required="" name="dorm_code_to" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            @endif
            <div class="layui-form-item">
                <label for="adjust_date" class="layui-form-label">
                    <span class="x-red">*</span>调整日期
                </label>
                <div class="layui-input-block">
                    <input type="text"  required="" id="adjust_date" name="adjust_date" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="adjust_reason" class="layui-form-label">调整原因</label>
                <div class="layui-input-block">
                    <input type="text" name="adjust_reason" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button class="layui-btn" lay-filter="save" lay-submit="">
                    保存
                </button>
            </div>
        </form>
    </div>

    {{--宿舍搜索框--}}
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-collapse" lay-filter="search-condition">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
                            <div class="layui-colla-content">
                                <form class="layui-form" action="">
                                    <input type="hidden" name="staff_id" value="{{$staff->id}}">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">宿舍匹配</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="check_dorm_type" value="0" title="否">
                                            <input type="radio" name="check_dorm_type" value="1" title="是" checked="">
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">
                                            <span class="x-red">*</span>选‘是’，则会对人员的职位、性别和宿舍类型所规定的职位、性别分别比对，并列出符合的宿舍。
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">包含已住满</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="include_take_over" value="0" title="不包含" checked="">
                                            <input type="radio" name="include_take_over" value="1" title="包含">
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">
                                            <span class="x-red">*</span>选‘包含’，那么已经入住满的宿舍也会列出。默认不包含
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">宿舍类型</label>
                                            <div class="layui-input-inline">
                                                <select name="dorm_type_id">
                                                    <option value="">请选择宿舍类型</option>
                                                    @foreach($dormTypes as $k=>$v)
                                                        <option value="{{$k}}">{{$v}}</option>
                                                     @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">楼栋</label>
                                            <div class="layui-input-inline">
                                                <select name="building_id">
                                                    <option value="">请选择楼栋</option>
                                                    @foreach($buildings as $k=>$v)
                                                        <option value="{{$k}}">{{$v}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit="" lay-filter="dormFilter">筛选</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>

</div>
<script>layui.use(['form', 'layer','table','laydate'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            let laydate = layui.laydate;
            laydate.render({
                elem:'#adjust_date'
                ,max:new Date().toISOString().substr(0,10)
                ,value:new Date().toISOString().substr(0,10)
                ,isInitValue: true //是否允许填充初始值，默认为 true
            });
            var table = layui.table;
            table.render({
                elem: '#test'
                , height: 300
                , url: '/staffs/{{$staff->id}}/dorm-arrange?check_dorm_type=on'
                , toolbar: false
                , title: '宿舍列表'
                , cols: [[
                    // {type: 'checkbox'}
                    // , {field: 'id', title: 'ID', width: 60, unresize: true, sort: true}
                    {field: 'building_name', title: '楼栋', width: 80,sort: true,templet:function (d) {
                            return d.building?.name||'';
                        }}
                    ,{field: 'dorm_type', title: '宿舍类型', width: 100,sort: true,templet:function (d) {
                            return d.dorm_type?.name||'';
                        }}
                    ,{field: 'unit_name', title: '单元号', width: 100, sort: true}
                    , {field: 'floor', title: '楼层', width: 80, sort: true}
                    // , {field: 'dorm_type_name', title: '宿舍类型', width: 100, sort: true}
                    , {field: 'code', title: '宿舍号', width: 100, sort: true}
                    , {field: 'beds', title: '可入住', width: 100, sort: true}
                    , {field: 'staffs_count', title: '已入住数', width: 100,sort: true}
                    , {field: 'staffs', title: '入住人员信息', width: 360,sort: true,templet:function (d) {
                            let info=""
                            d.staffs.forEach((s,i)=>{
                                if(i%2==1){
                                    info+=`<label class='odd'> ${s.staffInfo} </label>`
                                }else{
                                    info+=`<label class='even'> ${s.staffInfo} </label>`
                                }

                            })
                            return info
                        }}

                ]]
                , initSort:{field:'staffs_count',type:'asc'}
            });

            table.on('row(test)', function(obj){
                console.log(obj.tr) //得到当前行元素对象
                console.log(obj.data) //得到当前行数据
                $("[name='dorm_code_to']").val(obj.data.code);
                //obj.del(); //删除当前行
                //obj.update(fields) //修改当前行数据
            });


            //监听提交
            form.on('submit(save)',
                function (data) {
                    $.ajaxSetup(
                    {
                        headers:
                            {
                                'X-CSRF-Token': $('input[name="_token"]').val()
                            }
                    });
                    let url = '/staff-dorm-adjusts';
                    console.log(url);
                    $.ajax({
                        url: url,
                        data: data.field,
                        type: 'POST',
                        dataType: "json",
                        success: function (d) {
                            if(d.error){
                                layer.msg('保存失败:'+d.message, {icon: 2, time: 3000});
                            }else{
                                layer.alert('保存成功',{icon:6,time:5000},function () {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 刷新父窗口数据表格
                                    parent.layui.table.reload('test');
                                });
                            }
                        },
                        error: function (err) {
                            console.log(err)
                            layer.msg('保存失败', {icon: 2, time: 1000});
                        }
                    });
                    return false;

                });

            //监听提交
            form.on('submit(dormFilter)', function(data){
                table.reload('test', {
                    url: `/staffs/${data.field.staff_id}/dorm-arrange`
                    , where: data.field
                });
                return false;
            });

        });
</script>
</body>

</html>
